<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>福田十景</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <!-- vconsole调试工具 -->
<!--  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 微信js -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <!-- html2canvas -->
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script type="text/javascript" src="./3Dtiles-assets/uni.webview.1.5.6.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      width: 100%;
      height: 100%;
      font-size: 12px;
    }
    #back{
      position: absolute;
      z-index: 999;
      display: block;
      width: 30px;
      height: 30px;
      top: 10px;
      left: 20px;
    }
    /*xdx加的*/
    .control-wrap {
      position: absolute;
      z-index: 999;
      display: block;
      top: 50px;
      right: 30px;
      /*border: 1px solid #00ff00;*/
   }

    #cesiumContainer{
      z-index: 9;
      background-color: cadetblue;
    }
    #nav-control-wrap{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: fit-content;
      padding: 20px;
      background-color: rgba(0,0,0,0.3);
    }
    .menu-wrap{
      display: flex;
      justify-content: flex-start;
      width: fit-content;
      height: fit-content;
    }
    .immediate-check-button {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 15px;
      font-size: 24px;
      color: #ffffff;
      background: linear-gradient(to right, #e3b672, #e6a23c);
      border-radius: 25px;
    }
    .immediate-check-button:active{
      background: linear-gradient(to right, #e6a23c, #e38c0a);
    }

    .icon-button {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      width: fit-content;
      margin: 5px;
      font-size: 12px;
      border: 2px solid transparent;
      border-radius: 5px;
      overflow: hidden;
    }
    .icon-button:active{
      border-color: #e6a23c;
    }
    .toggle-button-icon,.intro-button-icon{
      position: absolute;
      width: 60%;
      height: 60%;
      margin-bottom: 20px;
      box-sizing: border-box;
      z-index: 11;
    }
    .toggle-button-text,.intro-button-text{
      padding: 0 4px;
      color: #ffffff;
      z-index: 12;
    }
    .menu-list{
      display: flex;
      flex-wrap: nowrap;
    }
    .menu-item{
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      width: fit-content;
      margin: 5px;
      color: #ffffff;
      border-radius: 5px;
      border: 2px solid #ffffff;
      overflow: hidden;
    }
    .menu-item.active{
      border-color: #e6a23c;
    }
    .a-punched::after{
      z-index: 99;
      content: '';
      display: block;
      width: 34px;
      height: 15px;
      background: url("./3Dtiles-assets/mark.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 0;
      top: 0;
    }
    .menu-item-icon{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 11
    }
    .menu-item-text{
      padding: 0 4px;
      color: #ffffff;
      font-size:9px;
      z-index: 12
    }
    /* 简介 弹出层 */
    #intro-dialog{
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: fit-content;
      padding: 10px 20px;
      background-color: rgba(0,0,0,0.3);
      border-radius: 20px 20px 0 0;
      color: #fff;
    }
    .intro-dialog-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0px;
      font-size: 18px;
      border-bottom: 1px solid #dad9d9;
    }
    .intro-dialog-title{
      font-weight: 600;
    }
    .intro-dialog-address{
      padding: 10px 0px;
      font-size: 14px;
    }
    .intro-dialog-content {
      max-height: 100px;
      font-size: 15px;
      overflow-y: auto;
    }
    .fudai {
      display: none;
      position: absolute;
      z-index: 999;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 40px;
     /* border: 1px solid #00ff00;*/
    }
    .jiang {
      display: none;
      position: absolute;
      z-index: 1000;
      width: 260px; /* 固定宽度 */
      height: 320px; /* 高度自动适应 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%);
      background: url("./3Dtiles-assets/kaijiang.png") no-repeat center; /* 背景图居中 */
      background-size: contain;
    }
    .jiang .closej{
      position: absolute; /* 确保按钮相对于父元素定位 */
      top: 4px; /* 距离父元素顶部 50px */
      right: 2px; /* 距离父元素右侧 50px */
      width: 50px; /* 设置按钮宽度 */
      height: 50px; /* 设置按钮高度 */
      color: #dadada; /* 设置字体颜色为白色 */
      font-size: 16px;
      font-weight:bold;
      display: flex; /* 使用flexbox使内容居中 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
    .ipunch-in{
      display: none;
      z-index: 998;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 415px;
      height: 245px;
      background: url("./3Dtiles-assets/punch-in-success.png") no-repeat;
      background-size: 100% 100%;
    }
    .ipunch-in .punch-btn{
      width: 100px;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      border-radius: 50px;
      background: #ed8000;
      margin-right: 15px;
    }
    /* 点击高亮效果 */
    .ipunch-in .punch-btn:active{
      font-weight: 600;
      background: #e8a85f;
    }
    .ipunch-in #punch-src{
      display: block;
      width: 100%;
    }
    .ipunch-in #closed{
      position: absolute;
      top: 27px;
      right: 12px;
      font-weight: 500;
      color: #795548;
      font-size: 23px;
    }
    .ipunch-in .punch-btn-wrap{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }
    .ipunch-in .punch-in-content{
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 15px;
      padding-top: 70px;
    }
    .ipunch-in .punch-in-content .left{
      min-width: 71%;
      height: 165px;
      border: 2px solid #fff;
      border-radius: 4px;
      object-fit: cover;
    }
    .punch-in-content-right{
      margin-left: 10px;
    }
    .punch-in-content-right .wx-attar{
      width: 35px;
      height: 35px;
      display: block;
      border-radius: 50%;
      background: #fff;
      margin-bottom: 5px;
    }
    .punch-in-content-right .wx-name{
      font-size: 12px;
      color: #fff;
    }
    .punch-in-content-right .view-name{
      color: #fff;
      font-size: 16px;
      font-weight: 500;
    }
    .punch-in-content-right .view-date{
      color: #fff;
      font-size: 10px;
    }
    .punch-in-content-right .qgcode-wrap{
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .punch-in-content-right .qgcode-wrap .qgCode{
      display: block;
      width: 50px;
      height: 50%;
      border-radius: 4px;
    }
    .punch-in-content-right .qgcode-wrap .qgCode{
      display: block;
      width: 50px;
      height: 50%;
      border-radius: 4px;
    }
    .punch-in-content-right .qgcode-wrap p{
      color: #fff;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <!--返回按钮  -->
  <img src="./3Dtiles-assets/back.png" alt="" id="back">

  <div class="control-wrap">
    <div id="voice-button" class="icon-button">
      <img class="intro-button-icon" src="./3Dtiles-assets/voice.png">
      <p class="intro-button-text">语音简介</p>
    </div>
    <div id="intro-button" class="icon-button">
      <img class="intro-button-icon" src="./3Dtiles-assets/introduction.png">
      <p class="intro-button-text">景点简介</p>
    </div>
  </div>

  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>

  <div id="nav-control-wrap">

    <div class="menu-wrap">
      <div id="menu-toggle-button" class="icon-button">
        <img class="toggle-button-icon" src="./3Dtiles-assets/left_arrow.png">
        <p class="toggle-button-text">收起场景</p>
      </div>
      <div class="menu-list"></div>
    </div>

    <!-- 立即打卡 -->
    <div class="immediate-check-button">立即打卡</div>

  </div>

  <!-- 景点简介 弹出层 -->
  <div id="intro-dialog" class="intro-dialog">
    <div class="intro-dialog-header">
      <span class="intro-dialog-title"></span>
      <span class="intro-dialog-close">关闭</span>
    </div>
    <div class="intro-dialog-address"></div>
    <div class="intro-dialog-content"></div>
  </div>
  <!-- 打卡成功 弹出层 -->
  <div id="punch-in" class="ipunch-in" style="background-color: transparent;">
    <div id="closed">x</div>
    <div class="punch-in-content">
      <img id="punch-src" class="left" />

      <div class="punch-in-content-right">
        <!--<img src="" alt="头像" class="wx-attar">
        <p class="wx-name">微信用户</p>-->
        <p class="view-name">莲花春早</p>
        <p class="view-date">2024-06-12</p>
        <div class="qgcode-wrap">
          <img src="./3Dtiles-assets/qgcode.jpg" alt="" class="qgCode">
          <p>长按识别小程序码</p>
        </div>
      </div>
    </div>
    <div class="punch-btn-wrap">
      <div class="punch-btn" id="punch-download" >保存到相册</div>
      <!--<div class="punch-btn" id="punch-share">分享到朋友圈</div>-->
    </div>
  </div>
  <!--打卡成功弹出层end-->

  <div class="jiang" id="jiang">
    <div class="closej" id="closej">X</div>
  </div>

  <div class="fudai" id="fudai">
    <img src="./3Dtiles-assets/fudai.png" style="width: 100px;height: 100px;">
  </div>



  <script>
    // 模型初始化方法start...
    function initCesium() {
      // Cesium token
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YzY5OWRiZi03MjMwLTQ3MWItYjNkZi0wZmJjOWZmODdjZDUiLCJpZCI6MTI3MjQ1LCJpYXQiOjE3MjQ5MTk2MDl9.lTWl4Sc55usU7pL2l9GUVzwnOY38AJI8LQhnrgTAyVI'
      // 设置默认的相机角度
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)
      const viewer = new Cesium.Viewer('cesiumContainer', {
        //是否显示信息窗口
        infoBox: false,
        // 是否显示查询按钮
        geocoder: false,
        // 是否显示home按钮
        homeButton: false,
        // 是否显示控制显示模式
        sceneModePicker:false,
        // 是否显示图层选择
        baseLayerPicker: false,
        // 是否显示帮助按钮
        navigationHelpButton: false,
        // 是否 播放动画
        animation: false,
        // 是否显示时间轴
        timeline: false,
        // 是否显示全屏按钮
        fullscreenButton: false,
        imageryProvider: false,
        baseLayerPicker: false,
        terrainProvider: undefined,
        contextOptions: {
          //cesium状态下允许canvas转图片convertToImage
          webgl: {
            alpha: true,
            depth: false,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: true
          },
          allowTextureFilterAnisotropic: true
        }
      });
      viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#00000000')
      viewer.cesiumWidget.creditContainer.style.display = 'none'
      var camera = viewer.camera
      // 设置相机位置
      camera.positionWC = Cesium.Cartesian3.fromDegrees(-2405858.5026387125, 5380934.6446534395, 2430487.3061545445);  // 世界坐标系中的位置

      // 设置相机方向和姿态
      camera.directionWC = Cesium.Cartesian3.fromDegrees(0.9119361495317964, -0.32732669005900206, -0.2474463520687652);  // 世界坐标系中的方向
      camera.upWC = Cesium.Cartesian3.fromDegrees(0.3927452911688243, 0.8709386329593931, 0.2953253018004705);  // 上方向
      camera.rightWC = Cesium.Cartesian3.fromDegrees(0.1188427340725352, -0.36650120817514736, 0.9227964396140257);  // 右方向
      // 设置航向、俯仰角和滚转角
      camera.setView({
        orientation: {
          heading: 1.6673551822027832,  // 航向角（绕Z轴旋转）
          pitch: -0.9306448869948976,      // 俯仰角（绕X轴旋转）
          roll: 4.155550232809446e-7         // 滚转角（绕Y轴旋转）
          }
      });
      // 如果有更新视图函数，强制刷新
      viewer.scene.requestRender();
      window.MODEL_VIEWER = viewer;
      window.MODEL_CAMERA = camera;
      return viewer;
  }
    // 模型初始化方法end...


  // 通过模型json配置文件获取模型数据集方法
  async function getTilesetByModelJsonFile(modelViewer, jsonFileUrl) {
      const tileset = modelViewer.scene.primitives.add(
       await Cesium.Cesium3DTileset.fromUrl(
          jsonFileUrl,
          {
            // debugShowBoundingVolume: true,
            maximumScreenSpaceError: 1,
            skipLevelOfDetail: false,
            immediatelyLoadDesiredLevelOfDetail: true  // 立即加载目标细节
          }
        )
      );
      tileset.preloadWhenHidden = true;  // 预加载被隐藏的瓦片层级
      tileset.preloadFlightDestinations = true;  // 预加载飞行目的地的瓦片
      tileset.maximumMemoryUsage = 512;
      tileset.show = false
      return tileset;
    }
    // 通过模型数据集移动到目标模型位置
    function moveToPositionByModelTileset(tileset) {
     const offset = new Cesium.HeadingPitchRange(
       1.6673551822027832,
       -0.9306448869948976,
       400.0
     );
     tileset.show = true
     window.MODEL_VIEWER.zoomTo(tileset, offset);
   }

    // 工具方法
    // url 序列化方法
    function deserializeParams(url = window.location.href) {
      const params = {};
      const queryStr = url.split('?')[1];
      if (!queryStr) return {};
      queryStr.split('&').forEach(function(pair) {
        const [key, value] = pair.split('=');
        params[decodeURIComponent(key)] = decodeURIComponent(value) || '';
      });
      return params;
    }

    window.MENU_SHOW = true;
    window.CURRENT_MENU = null;
    //window.BASE_URL = 'http://43.136.83.78:9035';
    window.BASE_URL = 'https://ftwl.szft.gov.cn';
    // vConsole 调试工具
    /*var vConsole = new window.VConsole();*/

    // 请求菜单参数 https://ftwl.szft.gov.cn/mini/scenic-spot/list
    function getMenuList(config, successFn = null, failFn = null) {
      console.log('ajax请求菜单数据=>config', config);
      $.ajax({
        url: window.BASE_URL + config.url,
        type: 'GET',
        data: {
          current: 1,
          size: 10
        },
        headers: {
          token: config.token || 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMiIsInN1YiI6IjEyIiwiaXNzIjoiSmF2YTEyMyIsImlhdCI6MTcyODQ4MTgzMn0.yoS19PTXcg6eRPv4NaIELjMxDtl1DwC-p_lNiJ5ge3c',
        },
        success: function(response) {
          console.log('ajax请求菜单数据成功=>response', response);
          successFn && successFn(response);
        },
        error: function(error) {
          console.log('ajax请求菜单数据失败=>error', error);
          failFn && failFn(error);
        }
      })
    }

    // 打卡接口方法
    function CheckScenicSpot({config, successFn = null, failFn = null}) {
      $.ajax({
        url: window.BASE_URL + config.url,
        type: 'GET',
        data: config.data,
        headers: {
          token: config.token,
        },
        success: function(response) {
          console.log('打卡 ajax请求成功=>response', response);
          successFn && successFn(response);
        },
        error: function(error) {
          console.log('打卡 ajax请求失败=>error', error);
          failFn && failFn(error);
        }
      })
    }

    // 横屏判断方法, 默认竖屏 0
    function isLandscape() {
      return window.orientation === 90 || window.orientation === -90;
    }

    // 手机屏幕横竖判断
    function getScreenOrientation() {
      return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
    }

    // 菜单列表渲染方法
    function renderMenuList(menuList = []) {
      const menuListEle = $('.menu-list');
      const menuItemWidth = $('#menu-toggle-button').width();
      // 默认激活第一个菜单
      window.CURRENT_MENU = menuList[0];
      menuList.forEach((item, index) => {
        const menuItem = $('<div>', {
          class: 'menu-item',
          name: item.title,
          click: function() {
            console.log('menu click', item)
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
            window.CURRENT_MENU = item;
            if (item.modelTileset) moveToPositionByModelTileset(item.modelTileset);
          }
        });
        menuItem.css('height', menuItemWidth);
        if (0 === index) {
          menuItem.addClass('active');
        }
        if (item.punchCard){
          menuItem.addClass('a-punched');
        }
        const menuItemIcon = $('<img>', {
          src: item.icon,
          class: 'menu-item-icon'
        });
        const menuItemText = $('<p>', {
          text: item.title,
          class:'menu-item-text'
        });
        menuItem.append(menuItemIcon);
        menuItem.append(menuItemText);
        menuListEle.append(menuItem);
      })
    }

    // 展开收起按钮点击处理方法
    function toggleButtonClickHandle(durtion = 0){
      if (window.MENU_SHOW) {
          $('.menu-list').show(durtion);
          $('.immediate-check-button').hide();
          $('#intro-button').show();
          $('#voice-button').show();
          $('.toggle-button-text').text('收起场景');
          $('.toggle-button-icon').attr('src', './3Dtiles-assets/left_arrow.png');
          $('#nav-control-wrap').css('background-color', 'rgba(0,0,0,0.3)');
        } else {
          $('.menu-list').hide(durtion);
          $('.immediate-check-button').show();
          $('.toggle-button-text').text('展开场景');
          $('.toggle-button-icon').attr('src', './3Dtiles-assets/menu.png');
          $('#nav-control-wrap').css('background-color', 'transparent');
          // window.CURRENT_MENU
          if (window.CURRENT_MENU && window.CURRENT_MENU.contentAudio) {
            $('#voice-button').show();
          }
          if (window.CURRENT_MENU && window.CURRENT_MENU.intro) {
            $('#intro-button').show();
          }
        }
        if(window.audio) window.audio.pause();
    }

    // 菜单接口请求数据后处理
    function getMenuListAfterHandle(result, modelViever) {
      window.MENU_LIST = result.data;
      console.log("result.data:",result.data)
      // 渲染菜单
      renderMenuList(window.MENU_LIST);
      // 计算模型数据集
      window.MENU_LIST.forEach(async(item, index) => {
        // 如果接口没有model字段数据，则暂时使用 window.MENU_LIST 数据
        item.modelTileset = await getTilesetByModelJsonFile(modelViever, item.model);
        if (0 === index) {
          // 默认打开第一个模型
            moveToPositionByModelTileset(item.modelTileset);
          }
      });
    }

    // jquery
    $(document).ready(function() {
      // 1、模型初始化
      window.modelViever = initCesium();
      // 2、html url 序列化，获取从小程序打开webview 传递token
      const params = deserializeParams(window.location.href);
      //console.log('params=>token', params);
      // 3、调用菜单接口数据
      getMenuList(
        {baseUrl: window.BASE_URL, url: '/mini/scenic-spot/list', token: params.token},
        function(result) {
          console.log('获取菜单接口结果=>result result.data', result, result.data);
          if (!result.data) {
            // 如果没有获取到菜单数据， 返回小程序首页
            wx.miniProgram.switchTab({url:'/pages/home/home'});
            return;
          }
          // 渲染菜单模型
          getMenuListAfterHandle(result, window.modelViever)
        },
        function(error) {
          console.log('获取菜单接口=>error', error);
          getMenuListAfterHandle(error, window.modelViever);
        }
      );

      // 按钮样式宽高设置
      const menutoggleButton = $('#menu-toggle-button');
      const menuItemWidth = menutoggleButton.width();
      menutoggleButton.css('height', menuItemWidth);
      menutoggleButton.css('min-width', menuItemWidth);
      const introButtonWidth = $('#intro-button').width();
      $('#intro-button').height(introButtonWidth);
      $('#voice-button').height(introButtonWidth);
      // 菜单初始化判断
      toggleButtonClickHandle();
      // 菜单展开收起按钮点击事件
      menutoggleButton.click(function() {
        window.MENU_SHOW = !window.MENU_SHOW;
        toggleButtonClickHandle(600);
      });
      // 语音介绍按钮点击事件
      $('#voice-button').click(function() {
        console.log('voice-button click', window.CURRENT_MENU);
        if (window.CURRENT_MENU && window.CURRENT_MENU.contentAudio) {
          // 如果音频已经存在并且正在播放，则停止播放
          if (window.audio && !window.audio.paused) {
            window.audio.pause(); // 暂停音频
            window.audio.currentTime = 0; // 重新设置音频时间为0
          } else {
            // 如果音频不存在或已经暂停，播放音频
            window.audio = new Audio(window.CURRENT_MENU.contentAudio);
            window.audio.play();
          }
        }
      });

      // 景点简介按钮点击事件展开
      $('#intro-button').click(function() {
        console.log('intro-button click', window.CURRENT_MENU);
        $('#intro-dialog').show(500);
        $('#nav-control-wrap').hide();
        $('.intro-dialog-title').text(window.CURRENT_MENU.title);
        $('.intro-dialog-address').html(window.CURRENT_MENU.address);
        $('.intro-dialog-content').html(window.CURRENT_MENU.intro);
      });
      // 景点简介按钮点击事件关闭
      $('.intro-dialog-close').click(function() {
        console.log('intro-button click close', window.CURRENT_MENU);
        $('#intro-dialog').hide(500);
        $('#nav-control-wrap').show(500);
      });

      // 景点打卡按钮点击事件
      let imgSrc
      $('#closed').click(function() {
        $('#punch-in').hide();
        $('#fudai').hide();
        $('.immediate-check-button').show();
      })
      // 景点打卡按钮点击事件
      $('.immediate-check-button').click(function() {
        // takeScreenshot()
        $('#punch-in').show(500);
        $('#fudai').show(700);
        $('.immediate-check-button').hide();
        $('.view-name').html(window.CURRENT_MENU?.title)
        $('.view-date').html(`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`)
        var canvas = window.MODEL_VIEWER.scene.canvas;
        // 将Canvas内容转换为DataURL
        const base64 = canvas.toDataURL('image/png')
        imgSrc = base64;
        //console.log('imgSrc', imgSrc)
        $('#punch-src').attr('src', imgSrc)
        // punchCard8u=ytewds
        if (window.CURRENT_MENU && window.CURRENT_MENU.punchCard) {
          // 已经打卡
          console.log('已经打卡=>punchCard', window.CURRENT_MENU.punchCard);
          return;
        }
        if (window.CURRENT_MENU && window.CURRENT_MENU.id) {
          CheckScenicSpot(
            {baseUrl: window.BASE_URL,
            url: '/mini/scenic-spot/checkInSuccess',
            token: params.token,
            data: {id: window.CURRENT_MENU.id},
            successFn: function(result) {
              console.log('打卡接口结果=>result', result);
              if (result.data) {
                // 打卡成功
              }
            },
            failFn: function(error) {
              // 打卡接口异常
              console.log('打卡接口异常=>error', error);
            }
          })
        }
      })

      //点击fudai 弹出zhongjiang页面
      $('#fudai').click(function() {
        $('#fudai').hide();
        $('#jiang').show(200);
      })
      /*关闭jiang页面*/
      $('#closej').click(function() {
        $('#jiang').hide();
      })


      // 保存到相册
      $('#punch-download').click(function() {
        console.log("保存到相册操作...")
        const element = document.getElementById('punch-in');
        $('#closed').css('display', 'none');
        // 使用 html2canvas 将 HTML 元素渲染为 Canvas
        html2canvas(element, {
          backgroundColor: null,  // 背景设为透明
          scale: 1.5,  // 将 Canvas 缩放为两倍，增加清晰度
          useCORS: true, // 处理跨域图片
        }).then(function(canvas) {
          const base64 = canvas.toDataURL('image/png')
          //console.log('canvas', base64)
          // 图片数据传递到小程序
          if(window.wx){
            window.wx.miniProgram.postMessage({
              data: {
                imgData: base64,
                type: 'save-image'
              }
            })
          }
          // 关闭弹出层// 将弹出层隐藏
          $('#punch-in').css('display', 'none');
          $('#closed').css('display', 'block');
          console.log("保存到相册操作完成。")
            // 将截图添加到页面上
            // document.getElementById('screenshot').appendChild(canvas);
        });
      })
      // 分享到朋友圈
      $('#punch-share').click(function() {
        console.log("分享到朋友圈操作...")
        webUni.postMessage({
            data: {
              action: 'share',
              src: imgSrc
            }
        });
      })
      // 返回
      $('#back').click(function() {
        console.log("返回操作...")
        webUni.navigateBack({
          delta: 1
        });
      })
    })
    function base64ToBlob(base64, type) {
      const byteCharacters = window.atob(base64);
      const byteNumbers = new Uint8Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      return new Blob([byteNumbers], { type: type });
    }


  </script>
</body>
</html>
